<template>
	<view class="content" >
		<u-empty v-show="rankShow" iconColor="#f18b49" mode="permission" text="账号等级过低,暂无权限查询" style="padding-top: 100rpx;"></u-empty>
		<view v-show="show">
			<u-sticky bgColor="#f7f7f7" style="padding-bottom: 10rpx;">
				<view class="head-inp">
					<input v-model="content" placeholder="查询全部店铺商品" placeholder-style="color: #999;" />
					<text v-show="content" class="search-btn" @click="toSearch()">查询</text>
				</view>
				<uni-segmented-control :current="current" :values="subList" @clickItem="sectionChange" styleType="text" activeColor="#f18b49"></uni-segmented-control>
			</u-sticky>
			<view class="pro-list" v-show="current == 0">
				<u-empty v-if="shopList == ''" iconColor="#f18b49" mode="order" text="该专区商品正在陆续上架中,再等等" style="padding-top: 100rpx;"></u-empty>
				<view class="pro-list-box" v-else>
					<view class="list-box"v-for="(item,index) in shopList" :key="index">
						<view class="list-img">
							<image :src="baseUrl + item.logo" @click="toSearchList(item.id)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="pro-list" v-show="current == 1">
				<u-empty v-if="shopList1 == ''" iconColor="#f18b49" mode="order" text="该专区商品正在陆续上架中,再等等" style="padding-top: 100rpx;"></u-empty>
				<view class="pro-list-box" v-else>
					<view class="list-box"v-for="(item,index) in shopList1" :key="index">
						<view class="list-img">
							<image :src="baseUrl + item.logo" @click="toSearchList(item.id)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				content: '',
				show: false,
				shopList: [],
				shopList1: [],
				rankShow: false,
				baseUrl: 'http://www.hy-dzsc.com/',
				subList: ['南网专区', '军网专区'],
			}
		},
		onShow() {
			this.verifyGrade()
		},
		onReachBottom(){
			uni.showToast({
				title: '没有更多店铺了',
				duration: 1000,
				icon: 'none'
			})
		},
		methods: {
			// 获取南网店铺
			getEnquiryShop(){
				uni.request({
					url: 'http://www.hy-dzsc.com/gjcApi/getCaImg',
					data: {},
					header: { 'content-type': 'application/x-www-form-urlencoded' },
					method:'GET',
					success: res => {
						this.shopList = res.data
					}
				})
			},
			// 切换顶部导航
			sectionChange(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
					if(this.current == 0){
						this.getEnquiryShop()
					}
				}
			},
			// 跳转专属查询商品列表
			toSearchList(id){
				uni.navigateTo({
					url: `/pages/enquiry/search-prolist?id=${id}`
				})
			},
			// 跳转全部查询商品列表
			toSearch(){
				uni.navigateTo({
					url: `/pages/enquiry/search-allPro?content=${this.content}`
				})
			},
			// 验证账号等级
			verifyGrade(){
				let token = uni.getStorageSync('token')
				let username = uni.getStorageSync('username')
				this.$http('/gjcApi/verifyToken', { username: username, token: token }, res => {
					if(token){
						if(res.rank_id == "sell_price"){
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							setTimeout(() => {
								uni.hideLoading()
								this.show = false
								this.rankShow = true
							}, 600)
						} else {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							setTimeout(() => {
								uni.hideLoading()
								this.getEnquiryShop()
								this.show = true
								this.rankShow = false
							}, 600)
						}
					} else {
						this.show = false
						this.loginVerify()
					}
				})
			},
			// 登录验证
			loginVerify(){
				uni.showModal({
					title: '登录验证',
					cancelText: '先逛逛',
					confirmText: '去登录',
					confirmColor: '#f18b49',
					content: '账号未登录，无法查询商品价格！',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/code-login'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-swiper-tab{
			white-space: nowrap;
		}
		.model_scrollx{
			justify-content: space-between;
			height: 45px;
			/* background-color: #F1EFEF; */
			align-items: center;
		}
		.scrollx_items{
			text-align: center;
			display: inline-block;
			width: 210rpx;
			box-sizing: border-box;
			margin-left: 30rpx;
			margin-top: 3px;
		}
		.scrollx_items:last-child{
			margin-right: 30rpx;
		}
		.scrollx_items image{
			width: 70rpx;
			height: 66rpx;
		}
		.tgyx_title{
			font-size: 28rpx;
			color: #333333;
			margin-top: 30rpx;
		}
		.tgyx_desc{
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	.pro-list {
		padding: 0 10rpx;
		.pro-list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.list-box {
				width: 360rpx;
				border-radius: 15rpx;
				margin-bottom: 15rpx;
				padding-bottom: 20rpx;
				background: $uni-model-color;
				.list-img {
					text-align: center;
					padding: 10rpx 10rpx 0 10rpx;
					image {
						width: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
.content{
	.head-inp{
		display: flex;
		align-items: center;
		padding: 15rpx;
		input{
			width: 750rpx;
			font-size: 30rpx;
			position: relative;
			border-radius: 40rpx;
			padding: 19rpx 158rpx 19rpx 20rpx;
			border: 2rpx solid $uni-text-color;
		}
		.search-btn{
			right: 21rpx;
			font-size: 28rpx;
			position: absolute;
			background: #ff914d;
			padding: 19rpx 50rpx;
			border-radius: 40rpx;
			color: $uni-model-color;
		}
	}
}
</style>
